<template>
  <div>
    <!-- 表单设计编辑 -->
    <div v-if="formType === 1">
      <a-input
        v-model:value="settingC.options.defaultValue"
        v-if="settingC.options.type === 'input'"
        :disabled="settingC.options.disabled"
        :placeholder="settingC.options.placeholder"
        :style="{ width: settingC.options.width + '%' }"
      ></a-input>
      <a-textarea
        v-else-if="settingC.options.type === 'textarea'"
        :rows="settingC.options.height"
        v-model:value="settingC.options.defaultValue"
        :disabled="settingC.options.disabled"
        :placeholder="settingC.options.placeholder"
        :style="{ width: settingC.options.width + '%' }"
      ></a-textarea>
      <a-input-password
        v-else
        v-model:value="settingC.options.defaultValue"
        :style="{ width: settingC.width + '%' }"
        :placeholder="settingC.placeholder"
        :disabled="settingC.disabled"
      >
        <a-icon type="lock" :style="{ color: 'rgba(0,0,0,.25)' }" />
      </a-input-password>
    </div>
    <!-- 表单展示 -->
    <div v-else>
      <!-- 表单展示编辑 -->
      <div v-if="settingC.fieldState === 0">
        <a-input
          v-if="settingC.options.type == 'input'"
          :disabled="settingC.options.disabled"
          :placeholder="settingC.options.placeholder"
          v-model:value="dataModel"
          :style="{ width: settingC.options.width + '%' }"
        ></a-input>

        <a-textarea
          v-else-if="settingC.options.type === 'textarea'"
          :rows="settingC.options.height"
          v-model:value="dataModel"
          :disabled="settingC.options.disabled"
          :placeholder="settingC.options.placeholder"
          :style="{ width: settingC.options.width + '%' }"
        ></a-textarea>
        <a-input-password
          v-else
          v-model:value="dataModel"
          :style="{ width: settingC.width + '%' }"
          :placeholder="settingC.placeholder"
          :disabled="settingC.disabled"
        >
          <a-icon type="lock" :style="{ color: 'rgba(0,0,0,.25)' }" />
        </a-input-password>
      </div>
      <!-- 表单展示只读 -->
      <div v-else>
        <a-input
          v-model:value="dataModel"
          disabled
          style="color: #595959; background-color: #fff; border: none"
        ></a-input>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        dataModel: this.models[this.setting.table + '-' + this.setting.field],
        settingC: this.setting,
        modelsC: this.models,
      }
    },
    props: {
      formType: {
        type: Number,
        default: 0,
      },
      setting: {
        type: Object,
        default: null,
      },

      models: {
        type: Object,
        default: Object,
      },
    },

    watch: {
      dataModel: {
        deep: true,
        handler(val) {
          this.modelsC[this.settingC.table + '-' + this.settingC.field] = val
        },
      },
    },
  }
</script>
